<template>
  <div class="optioncardstyle">
    <!-- 标题 -->
    <h2>{{ datas.text }}</h2>

    <!-- 提示 -->
    <p style="color: #969799; font-size: 12px; margin: 10px 0">拖动选中的导航可对其排序</p>

    <!-- 导航列表 -->
    <div>
      <vuedraggable v-model="datas.optionList" v-bind="dragOptions">
        <transition-group>
          <section v-for="(item, index) in datas.optionList" :key="item + index" class="txtList">
            <i class="el-icon-circle-close" @click="deleteOption(index)" />
            <!-- 标题和链接 -->
            <div class="opText">
              <div class="titpic">
                <el-button type="primary" @click="uploadTitPic(index)">
                  上传标题图片<i class="el-icon-upload el-icon--right"></i>
                </el-button>
                <img v-show="item.pictureUrl" draggable="false" :src="item.pictureUrl" alt="" />
                <span v-show="item.pictureUrl" @click="deleteImg(index)">删除</span>
              </div>
              <el-input v-model="item.name" placeholder="请输入标题" size="mini" style="margin-bottom: 6px" clearable />
              <!-- 选择类型 -->
              <select-link @selectThisLink="selectThisLink" @clearThisLink="clearThisLink(index)" :linktypeurl="item.url" :theIndex="index" />
              <!-- 年级选择 -->
              <el-cascader :options="gradelist" v-model="item.activeGrade" :props="{ multiple: true }" style="margin-top: 10px" @change="chooseGrade(index)" clearable></el-cascader>
              <el-select v-model="item.subjectCode" placeholder="请选择科目" style="margin-top: 6px">
                <el-option
                  v-for="item in newSubjectArr"
                  :key="item.tagEnumCode"
                  :label="item.tagEnumName"
                  :value="item.tagEnumCode">
                </el-option>
              </el-select>
              <!-- 顶部颜色 -->
              <div class="chooseys">
                <span>顶部颜色</span>
                <el-color-picker v-model="item.bgcolor" class="picke" :predefine="predefineColors" show-alpha />
              </div>
            </div>
          </section>
        </transition-group>
      </vuedraggable>
    </div>

    <!-- 添加选项卡 -->
    <el-button type="primary" plain @click="addOption">
      <i class="el-icon-plus" />添加选项卡
    </el-button>

    <div class="bor" />

    <!-- 表单 -->
    <el-form label-width="100px" :model="datas" size="small" :rules="rules">
      <!-- 选择样式 -->
      <el-form-item label="选择样式" class="lef">
        <p style="color: #000">{{ styleText }}</p>
      </el-form-item>
      <!-- 样式选择 -->
      <div class="commodityType">
        <el-tooltip class="item" effect="dark" content="样式一" placement="bottom">
          <span
            class="iconfont icon-icon_wubianju"
            style="font-size: 21px"
            :class="datas.commodityType === 0 ? 'active' : ''"
            @click="datas.commodityType = 0"
          />
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="样式二" placement="bottom">
          <span
            class="iconfont icon-icon_zuoyoubianju"
            style="font-size: 24px"
            :class="datas.commodityType === 1 ? 'active' : ''"
            @click="datas.commodityType = 1"
          />
        </el-tooltip>
      </div>
      <div style="height: 20px" />
      <!-- 选项卡背景颜色 -->
      <el-form-item label="选项卡背景" prop="twoBackgColor" class="lef" v-show="datas.commodityType === 1">
        <el-color-picker v-model="datas.twoBackgColor" class="picke" :predefine="predefineColors" show-alpha />
      </el-form-item>
      <div style="height: 20px" />
      <!-- 文字大小 -->
      <el-form-item label="文字大小" prop="textSize" :hide-required-asterisk="true" class="lef">
        <el-input v-model.number="datas.textSize" type="number" placeholder="请输入文字大小" :maxlength="2" />
      </el-form-item>

      <div style="height: 10px" />

      <!-- 布局 -->
      <el-form-item class="lef" label="选项卡布局">
        <div class="weiz">
          <el-tooltip
            v-for="index in 2"
            :key="index" effect="dark"
            :content="index - 1 === 0 ? '固定' : '滑动'"
            placement="bottom">
            <i class="iconfont" :class="[index - 1 === 0 ? 'icon-guding' : 'icon-hengxianghuadong', datas.textStyle === index - 1 ? 'active' : '']" @click="datas.textStyle = index - 1" />
          </el-tooltip>
        </div>
      </el-form-item>
      <div style="height: 10px" />
      <!-- 文字行高 -->
      <el-form-item label="文字行高" class="lef">
        <el-slider v-model="datas.textHeight" :max="50" :min="24" input-size="mini" show-input />
      </el-form-item>
    </el-form>

    <!-- 上传图片 -->
    <uploadimg ref="upload" @uploadInformation="uploadInformation" />
  </div>
</template>

<script>
import vuedraggable from "vuedraggable"; // 拖拽组件
import SelectLink from "../../selectLink";
import uploadimg from "../../uploadImg"; // 图片上传
import { getTemplateTagLevel } from "@/api/basisMG";
export default {
  name: "Optioncardstyle",
  components: { 
    vuedraggable, 
    SelectLink,
    uploadimg
  },
  props: {
    datas: Object,
  },
  computed: {
    styleText() {
      let data;
      if (this.datas.commodityType === 0) data = "样式一";
      if (this.datas.commodityType === 1) data = "样式二";
      return data;
    },
  },
  data() {
    const textSize = (rule, value, callback) => {
      if (value.length === 0) callback(new Error("请输入有效数字"));
      if (value > 30) {
        callback(new Error("数字不能超过30"));
        this.datas.textSize = '14';
      } else {
        this.datas.textSize = value;
      }
    };
    return {
      linktypeurl: "",
      currentIndex: 0,
      dragOptions: {
        // 拖拽配置
        animation: 200,
      },
      props: { multiple: true },
      gradelist: [
        {
          value: "0001",
          label: "小学",
          children: [
            { 
              value: "0001", 
              label: "一年级",
              children:[
                {
                  value: "1", label: "含同步培优",
                },
                {
                  value: "2", label: "不含同步培优"
                }
              ]
            },
            { 
              value: "0002", 
              label: "二年级",
              children:[
                {
                  value: "1", label: "含同步培优"
                },
                {
                  value: "2", label: "不含同步培优"
                }
              ]
            },
            { 
              value: "0003", 
              label: "三年级",
              children:[
                {
                  value: "1", label: "含同步培优"
                },
                {
                  value: "2", label: "不含同步培优"
                }
              ]
            },
            { 
              value: "0004", 
              label: "四年级",
              children:[
                {
                  value: "1", label: "含同步培优"
                },
                {
                  value: "2", label: "不含同步培优"
                }
              ]
            },
            { 
              value: "0005", 
              label: "五年级",
              children:[
                {
                  value: "1", label: "含同步培优"
                },
                {
                  value: "2", label: "不含同步培优"
                }
              ]
            },
            { 
              value: "0006", 
              label: "六年级",
              children:[
                {
                  value: "1", label: "含同步培优"
                },
                {
                  value: "2", label: "不含同步培优"
                }
              ]
            }, 
          ],
        },
        {
          value: "0002",
          label: "初中",
          children: [
            { 
              value: "0007", 
              label: "七年级",
              children:[
                {
                  value: "1", label: "含同步培优"
                },
                {
                  value: "2", label: "不含同步培优"
                }
              ]
            },
            { 
              value: "0008", 
              label: "八年级",
              children:[
                {
                  value: "1", label: "含同步培优"
                },
                {
                  value: "2", label: "不含同步培优"
                }
              ]
            },
            { 
              value: "0009", 
              label: "九年级",
              children:[
                {
                  value: "1", label: "含同步培优"
                },
                {
                  value: "2", label: "不含同步培优"
                }
              ]
            },
          ],
        },
        {
          value: "0003",
          label: "高中",
          children: [
            { 
              value: "0011", 
              label: "高中",
              children:[
                {
                  value: "1", label: "含同步培优"
                },
                {
                  value: "2", label: "不含同步培优"
                }
              ]
            }
          ],
        },
      ],
      predefineColors: [
        // 颜色选择器预设
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "#409EFF",
        "#909399",
        "#C0C4CC",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577",
      ],
      rules: {
        textSize: [{ required: true, validator: textSize, trigger: "blur" }]
      },
      newSubjectArr: [],
      classListArr: [],
      subjectArr: [],
      arrIndex: 0
    };
  },
  methods: {
    addOption() {
      this.datas.optionList.push({
        name: "选项卡",
        url: "",
        activeGrade: "", // 自用属性
        subjectCode: '',
        classList: [],
        bgcolor: "rgba(245, 245, 245, 1)",
        linktype: "",
        pictureUrl: ''
      });
    },
    // 图片上传
    uploadTitPic(index) {
      this.currentIndex = index;
      this.$refs.upload.showUpload();
    },
    uploadInformation(res) {
      this.datas.optionList[this.currentIndex].pictureUrl = res;
    },
    selectThisLink(resu) {
      this.datas.optionList.forEach((it, ind) => {
        if (ind == resu.index) {
          it.url = resu.url;
          it.linktype = resu.linktype;
        }
      });
    },
    clearThisLink (index) {
      this.datas.optionList[index].url = '';
    },
    deleteOption(index) {
      this.datas.optionList.splice(index, 1);
    },
    chooseGrade(index) {
      this.arrIndex = index;
      const valObj = this.datas.optionList[index].activeGrade.map((item) => ({
        stageCode: item[0],
        gradeCode: item[1],
        isTongbu: item[2]
      }));
      this.datas.optionList[index].classList = valObj;
      this.classListArr = valObj;
      this.getTemplateTagLevel();
    },
    //获取学段和科目
    async getTemplateTagLevel() {
      let arrSubje = [];
      const res = await getTemplateTagLevel({ id: "1361897479733286" });
      res.data.templateTagLevelDTOList.forEach((item) => {
        arrSubje.push(item.childrenDTOList);
      });
      this.subjectArr = JSON.parse(JSON.stringify(arrSubje));
      if (this.classListArr[0]) {
        this.chooseSubject(this.classListArr[0].stageCode);
      } else {
        this.datas.optionList.forEach(item => {
          this.chooseSubject(item.classList[0].stageCode)
        });
      }
    },
    chooseSubject(e) {
      // console.log(e,'eeeesubjectArr-----');
      if (e == "0001") {
        this.newSubjectArr = this.subjectArr[0];
      } else if (e == "0002") {
        this.newSubjectArr = this.subjectArr[1];
      } else if (e == "0003") {
        this.newSubjectArr = this.subjectArr[2];
      } else {
        this.newSubjectArr = this.subjectArr[0];
      }
    },
    deleteImg (index) {
      this.datas.optionList[index].pictureUrl = "";
    }
  },
  created () {
    if (!this.classListArr[0]) {
      this.getTemplateTagLevel();
    }
  }
}; 
</script>

<style scoped lang="scss">
.optioncardstyle {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 10px 20px;
  box-sizing: border-box;
  .bor {
    height: 1px;
    margin: 20px 0;
    background-color: #ebedf0;
  }
  /* 标题 */
  h2 {
    padding: 24px 16px 24px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #f2f4f6;
    font-size: 18px;
    font-weight: 600;
    color: #323233;
  }

  .lef {
    .el-form-item__label {
      text-align: left;
    }
    p {
      line-height: 4px;
    }
  }

  .txtList {
    padding: 6px 12px;
    margin: 16px 7px;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
    display: flex;
    position: relative;
    .titpic{
      margin:10px 0 20px 0;
      position:relative;
      img{
        width:100px;
        height:60px;
        display:block;
        margin-top:10px;
      }
      span{
        width:100px;
        height:20px;
        line-height:20px;
        background:rgba(0,0,0,0.6);
        color:#ffffff;
        position:absolute;
        bottom:0;
        left:0;
        text-align:center;
        font-size:12px;
      }
      :hover{
        cursor:pointer;
      }
    }
    /* 删除图标 */
    .el-icon-circle-close {
      position: absolute;
      right: -10px;
      top: -10px;
      cursor: pointer;
      font-size: 19px;
    }

    /* 图片字 */
    .opText {
      width: 100%;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      justify-content: space-between;
      .select-type {
        display: flex;
        .el-select {
          .el-input {
            input {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }

  /* 样式 */
  .commodityType {
    display: flex;
    justify-content: space-around;
    align-items: center;
    span {
      display: inline-block;
      width: 58px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      background: #ebedf0;
      color: #979797;
      border: 1px solid #fff;
      cursor: pointer;
      transition: all 0.5s;

      &:hover {
        border: 1px solid #155bd4;
        color: #155bd4;
      }

      &.active {
        border: 1px solid #155bd4;
        background-color: #e0edff;
        color: #155bd4;
      }
    }
  }

  /* 图片样式 */
  .weiz {
    text-align: right;
    i {
      padding: 5px 14px;
      margin-left: 10px;
      border-radius: 0;
      border: 1px solid #ebedf0;
      font-size: 20px;
      font-weight: 500;
      cursor: pointer;

      &:last-child {
        font-size: 22px;
      }

      &.active {
        color: #155bd4;
        border: 1px solid #155bd4;
        background: #e0edff;
      }
    }
  }

  .chooseys {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 14px;
      color: #666;
    }
  }
}
</style>
